<template>
  <div class="individual-wrapper"  v-title data-title="我参加了六个轮子征名活动，已入围评选，快来帮我投一票！">
    <div class="individual-content">
      <div class="vote-rule" style="overflow: hidden;">
        <img src="../styles/asset/levyimgs/voteing_01.png" alt="" >
        <span class="vote-rule-text">短短一周六个轮子收到1168条创意小名儿，阜阳人民热情满满呀！我们根据规则从中优选出66条入围投票环节 <i class="rule-text-color">（相同名称者，以提交时间提名首创者入围）</i>，得票前6名将晋级下一轮专家评选！</span>
      </div>
      <div class="vote-voting">
        <img src="../styles/asset/levyimgs/voting_02.jpg" alt="">
        <div class="list-vote-content" v-for="item in this.voteList">
          <div class="list-nickname">创意小名儿：<i class="name-color">{{ item.nickname }}</i>入围啦！</div>
          <div class="list-rule">快为它投一票吧！每个人每天限投1票，投票也有奖哦~</div>
          <div class="list-vote">
            <div class="list-left">
              <span class="list-userName">姓名：{{item.userName}}</span>
              <span class="list-userPhone">手机号码：{{item.userPhone}}</span>
              <span class="list-createTime">提交时间：{{item.createTime}}</span>
            </div>
            <div class="list-right">
              <span class="list-ranking">当前排名：<i class="rank-color">{{votingIndex}}</i>名</span>
              <span class="list-votes">当前票数：<i class="votes-color">{{item.voteCnt}}</i>票</span>
            </div>
          </div>
        </div>
        <div class="bar">
          <router-link class="homepage" :to="{path:'/activity/LevyVote'}"><i class="page-color">活动主页</i></router-link>
          <div v-if="!isExp" class="share" @click="_shareShow()"><i class="share-color">为TA拉票</i></div>
          <div v-if="!isExp" class="vote-botton" @click="_showLayer()"><i class="vote-btn">为TA投票</i></div>
        </div>
      </div>
    </div>
    <transition name="fade-in">
      <div class="fade_box" v-show="fadeRoles" :style="'height:' + this.boxbgHeight">
        <div class="fade_bg" @click="fadeRoles = false" :style="'height:' + this.boxbgHeight"></div>
        <div class="fade_out">
          <h2 class="list-h2">帮忙投票也有奖</h2>
          <div class="vote-phone">
            <div class="list-phone-content">
              <span class="lsit-uphone">手机号</span><input type="text" v-model="phone" placeholder="输入您的手机完成投票并领奖" maxlength="11">
            </div>
            <div class="list-code-content">
              <span class="list-ucode">验证码</span><input class="code" v-model="captchaCode" type="text" placeholder="验证码" maxlength="6">
            </div>
            <button class="list-sendCode" @click="_sendCode()" :disabled="!show">
              <span v-show="show">获取验证码</span>
              <span v-show="!show" class="count">{{count}}s</span>
            </button>
          </div>
          <button class="list-closeRule" @click="_saveVote()">为TA投票</button>
        </div>
      </div>
    </transition>
    <transition name="fade-in">
      <div class="fade_box" v-show="shareShow" :style="'height:' + this.boxbgHeight">
        <div class="fade_bg" @click="shareShow = false" :style="'height:' + this.boxbgHeight">
          <img class="share-img" src="../styles/asset/levyimgs/voting_03.png" alt="">
        </div>
      </div>
    </transition>
    <simplert ref="simplert"></simplert>
  </div>
</template>

<script type="text/ecmascript-6">
  import Simplert from '../../components/dialog/dialog'

  let filters = {
    parseURL:function(url) {
      let a = document.createElement('a');
      a.href = url;
      return {
        params: (function () {
          if(a.href.split('?').length > 2) {
            let ret = {},
              param = a.href.split('?')[2],
              seg = param.split('&'),
              len = seg.length,
              i = 0,
              s;
            for (; i < len; i++) {
              if (!seg[i]) {
                continue;
              }
              s = seg[i].split('=');
              ret[s[0]] = s[1];
            }
            return ret;
          } else {
            let ret = {},
              param = a.href.split('?')[1],
              seg = param.split('&'),
              len = seg.length,
              i = 0,
              s;
            for (; i < len; i++) {
              if (!seg[i]) {
                continue;
              }
              s = seg[i].split('=');
              ret[s[0]] = s[1];
            }
            return ret;
          }
        })()
      }
    }
  };
  export default {
    data() {
      return {
        VoteLists: {},
        index: '',
        tab: 1,
        voteList:[],
        votingIndex: '',
        id: '',
        appShareShow: false,
        weiShow: false,
        phone: '',
        fadeRoles: false,
        captchaCode: '',
        show: true,
        count:'',
        boxbgHeight: '',
        shareShow: false,
        isExp:false
      }
    },
    mounted() {
      var date = new Date();
      var expDate = new Date('2017-11-19 23:59'.replace(/-/g, "/"));
      if(date!=''&&expDate!=''&&date>expDate)
      {
        this.isExp = true;
      }
      this.$nextTick(() => {
        this._getVoteList();
        this._setBoxHeight();
      })
      this._getUrl();
      let url = window.location.href;
      let root = process.env.MAIN_ROOT;
      this.$util.sendShareMessage("我参加了六个轮子征名活动，已入围评选，快来帮我投一票！","", root+this.img,url);
    },
    methods: {
      _getVoteList() {
        var _this = this;
        let list = [];
//        this.$api.post('http://192.168.0.137:8081/activityNickname/v1/getVoteList?orderType=' + this.tab, {}, s => {
        this.$api.post('/activityNickname/v1/getVoteList?orderType=' + this.tab, {}, s => {
          this.VoteLists = s.module;
          for (let i = 0; i < this.VoteLists.length; i++) {
            if (this.id == this.VoteLists[i].id) {
              list.push(this.VoteLists[i]);
              _this.voteList = list;
              _this.votingIndex = i+1
            }
          }
        })
      },
      _shareShow() {
        this.shareShow = true;
      },
      _showLayer() {
        this.fadeRoles = true;
//        console.log(this.id);
      },
      _sendCode() {
        if(this.phone === '') {
          this.open('请输入手机号码',false,'','','fade_alert',function(){
          });
          return false;
        }
        let pat = /^1\d{10}$/;
        if (!pat.test(this.phone)) {
          this.open('请输入有效的手机号码',false,'','','fade_alert',function(){});
          return false;
        }
        const time = 60;
        if (!this.timer) {
          this.timer = true;
//          this.$api.post('http://192.168.0.137:8081/sendCode/v1/sendRegSms?phone='+this.phone,{},s=>{
          this.$api.post('/sendCode/v1/sendRegSms?phone='+this.phone,{},s=>{
            this.open('验证码发送成功',false,'','','fade_success',function(){

            });
            this.count = time;
            this.show = false;
            const countTime = setInterval(() => {
              if (this.count > 0 && this.count <= time) {
                this.count--;
              } else {
                this.show = true;
                clearInterval(countTime);
                this.timer = false;
              }
            }, 1000)
          },f=>{
            this.timer = false;
            this.open(f.errorMessage,false,'','','fade_alert',function(){

            });
            return;
          });
        }
      },
      _saveVote() {
        if(this.phone === '') {
          this.open('请输入手机号码',false,'','','fade_alert',function(){
          });
          return false;
        }
        let phonepat = /^1\d{10}$/;
        if (!phonepat.test(this.phone)) {
          this.open('请输入有效的手机号码',false,'','','fade_alert',function(){});
          return false;
        }
        if(this.captchaCode === '') {
          this.open('请输入验证码',false,'','','fade_alert',function(){});
          return false;
        }
        let codepat = /^\d{6}$/;
        if (!codepat.test(this.captchaCode)) {
          this.open('请输入正确的验证码',false,'','','fade_alert',function(){});
          return false;
        }
//        this.$api.post('http://192.168.0.137:8081/activityNickname/v1/saveVote?phone=' + this.phone + '&id=' +this.id +'&captchaCode=' + this.captchaCode, {}, s=> {
        this.$api.post('/activityNickname/v1/saveVote?phone=' + this.phone + '&id=' +this.id +'&captchaCode=' + this.captchaCode, {}, s=> {
          this.open('投票成功',false,'',function(){},'',() => {},'谢谢支持！六个轮子送你2元骑行现金券24小时内到账！登录六个轮子APP—我的钱包即可查看。每天限投一票，去帮TA拉票吧！','');
          setTimeout(() => {
            this.fadeRoles = false;
            this._getVoteList();
          },1500)
        }, f=> {
          this.open("抱歉，投票失败！",false,'',function(){},'',function(){},'每天只可投票1次，今天投票机会已经用完啦，可以继续帮好友拉票哦！','');
          setTimeout(() => {
            this.fadeRoles = false;
          },1500);
        })
      },
      _setBoxHeight() {
        let height = window.innerHeight;
        this.boxbgHeight = height + 'px';
      },
      _getUrl() {
        const url = window.location.href;
        this.id = filters.parseURL(url).params.id;
        this.index = filters.parseURL(url).params.index;
        this.votingIndex = parseInt(filters.parseURL(url).params.index) + 1;
//        this.tab = filters.parseURL(url).params.tab;
      },
//      openFriends() {
//        //朋友圈
//        let userAgentObj = navigator.userAgent;
//        let root = process.env.MAIN_ROOT;
//        if(userAgentObj.match(/Android/i)){
//          window.control.WXSceneTimeline('六个轮子邀请注册送优惠券','好朋友给你送券来了，邀你注册六个轮子，用券免车费轻松出行更安全',root+this.img,root+'/#/app/invitationRegister?inviterPhone='+ this.inviterPhone);
//        }else if(userAgentObj.match(/iPhone/i)){
//          WXSceneTimeline('六个轮子邀请注册送优惠券','好朋友给你送券来了，邀你注册六个轮子，用券免车费轻松出行更安全',root+this.img,root+'/#/app/invitationRegister?inviterPhone='+ this.inviterPhone);
//        }
//      },
//      openCircle() {
//        //好友
//        let userAgentObj = navigator.userAgent;
//        let root = process.env.MAIN_ROOT;
//        if(userAgentObj.match(/Android/i)){
//          window.control.WXSceneSession('六个轮子邀请注册送优惠券','好朋友给你送券来了，邀你注册六个轮子，用券免车费轻松出行更安全',root+this.img,root+'/#/app/invitationRegister?inviterPhone='+ this.inviterPhone);
//        }else if(userAgentObj.match(/iPhone/i)){
//          WXSceneSession('六个轮子邀请注册送优惠券','好朋友给你送券来了，邀你注册六个轮子，用券免车费轻松出行更安全',root+this.img,root+'/#/app/invitationRegister?inviterPhone='+ this.inviterPhone);
//        }
//      },
      open (title, confirmBtn,customConfirmBtnText,onConfirm,type,onClose,message,customCloseBtnText) {
        let obj = {
          title: title,
          useConfirmBtn: confirmBtn,
          customConfirmBtnText: customConfirmBtnText,
          onConfirm:onConfirm,
          type: type,
          onClose:onClose,
          message:message,
          customCloseBtnText:customCloseBtnText
        };
        this.$refs.simplert.openSimplert(obj);
      }
    },
    components: {
      Simplert
    }
  }
</script>

<style>
  /*reset*/
  * {  margin:0;  padding:0;  box-sizing:border-box;  }
  html{  overflow-y:auto;  font-size:62.5%;  }
  body { color:#333;  font-size:1.4rem;  font-family: "arial","Open Sans","PingHei","Hiragino Sans GB","Microsoft YaHei","黑体","宋体",sans-serif;  background-color:#fff;  }
  a {  text-decoration:none;  color:#4e4e4e;  font-size:14px;  font-family: "arial","Open Sans","PingHei","Hiragino Sans GB","Microsoft YaHei","黑体","宋体",sans-serif;  -webkit-font-smoothing: antialiased;  }
  textarea,input,select{font-family: "arial","Open Sans","PingHei","Hiragino Sans GB","Microsoft YaHei","黑体","宋体",sans-serif;}
  img {  border:0;  vertical-align:top;  }
  ol, ul, li {  list-style:none;  }
  dl, dt, dd, ul, li {  margin:0;  padding:0;  }
  input,textarea{outline: none;}
  html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
  body,html{ width: 100%; height: 100%;}
  .individual-wrapper, .individual-content {
    width: 100%;
    height:100%;
  }
  .vote-rule {
    position: relative;
  }
  .vote-rule img, .vote-voting img {
    width: 100%;
  }
  .vote-rule-text {
    font-size: 12px;
    padding:0 0.25rem 0.25rem;
    color: #666666;
    display: inline-block;
    left: 0;
  }
  .rule-text-color {
    color: #ff5d2e;
    font-style: normal;
  }
  .vote-voting {
    position: relative;
  }
  .list-vote-content {
    width: 100%;
    font-size: 14px;
    position: absolute;
    top: 0.12rem;
    left: 0;
  }
  .list-nickname {
    width: 100%;
    height: 0.8rem;
    line-height: 1rem;
    text-align: center;
  }
  .name-color {
    display: inline-block;
    font-style: normal;
    height: 0.4rem;
    line-height: 0.4rem;
    border-bottom: 1px solid #ff5d2e;
    color: #ff5d2e;
  }
  .list-rule {
    font-size: 12px;
    width: 100%;
    height: 0.5rem;
    line-height: 0.5rem;
    color: #a09b9a;
    text-align: center;
  }
  .list-vote {
    width: 100%;
    height: 2rem;
  }
  .list-left, .list-right {
    width: 65%;
    float: left;
  }
  .list-right {
    width: 30%;
    float: left;
  }
  .list-left span {
    display: block;
    height: 0.5rem;
    line-height: 0.5rem;
    overflow: hidden;
    padding-left: 0.4rem;
    color: #a09b9a;
  }
  .list-userName, .list-ranking, .list-votes {
    margin-top: 0.2rem;
  }
  .list-right span {
    display: block;
    height: 0.8rem;
    color: #a09b9a;
  }
  .rank-color, .votes-color {
    font-style: normal;
  }
  .rank-color {
    color: #ff5d2e;
  }
  .votes-color {
    color: #62d36c;
  }
  .bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.19rem;
    line-height: 1.19rem;
    border-top: 1px solid #e4dddb;
    border-bottom: 1px solid #e4dddb;
    background: #ffffff;
  }
  .bar, .homepage {
    font-size: 14px;
  }
  .homepage, .share, .vote-botton {
    width: 33.33%;
    float: left;
    text-align: center;
  }
  .share {
    border: 1px solid #e4dddb;
    border-top: none;
    border-bottom: none;
  }
  .page-color, .share-color, .vote-btn {
    font-style: normal;
  }
  .share-color, .vote-btn {
    display: inline-block;
    width: 2rem;
    height: 0.7rem;
    line-height: 0.7rem;
    border-radius: 2rem;
    color: #ffffff;
  }
  .share-color {
    background: #62d36c;
  }
  .vote-btn {
    background: #ff5d2e;
  }

  .list-phone-content {
    width: 85%;
    height: 0.8rem;
    margin: 0.3rem auto;
    background: #e8e8e8;
    border-radius: 0.1rem;
  }
  .list-phone-content input {
    width: 3.91rem;
    height: 0.8rem;
    border: none;
    font-size: 12px;
    display: inline-block;
    border-radius:  0 10px 10px 0;
    background: none;
  }
  .lsit-uphone,.list-ucode {
    display: inline-block;
    width: 1rem;
    height: 0.8rem;
    text-align: center;
    font-size: 12px;
  }
  .list-code-content {
    width: 52%;
    height: 0.8rem;
    float: left;
    margin-left: 0.45rem;
    margin-bottom: 0.4rem;
    background: #e8e8e8;
    border-radius: 0.1rem;
  }
  .list-code-content input {
    width: 2rem;
    height: 0.8rem;
    border: none;
    font-size: 12px;
    display: inline-block;
    border-radius:  0 10px 10px 0;
    background: none;
  }
  .share-img {
    width: 80%;
    display: block;
    margin: 0 auto;
    padding-top: 0.7rem;
  }
  .list-sendCode {
    float: left;
    margin: 0 0 0 0.2rem;
    width: 29.5%;
    height: 0.8rem;
    border: 1px solid #ff5d2e;  background: #ffffff;  color: #ff5d2e;  border-radius: 5px;  }

  .list-closeRule {
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    border: none;
    color: #fff;
    background-color: #ff5d2e;
    font-size: 14px;
  }
  .fade_box{  position: fixed; display: flex;  z-index: 999;  top: 0;  left: 0;  overflow: auto;  width: 100%; height: 100%;  align-items:center;  }
  .fade_bg{ background-color: rgba(0,0,0,0.7); position: absolute; width: 100%; height: 100%;}
  .fade_out{ background-color: #fff; border-radius: 0.25rem; width: 5.8rem; font-size: 14px; margin: 0 auto; padding-top: 0.5rem; max-height:90%; overflow-y: scroll;  animation-name: zoomIn;  animation-duration: .3s;  animation-fill-mode: both;  }
  .fade_out .list-h2{background: url("../styles/asset/levyimgs/levy05.png") no-repeat center; background-size: contain; text-align: center; color: #ff5d2e; font-size: 16px; margin: 0 0.6rem; margin-bottom: 0.4rem;}
  @keyframes zoomIn { from {  transform: scale3d(0.3, 0.3, 0.3);  opacity: 0;  } 50% {  opacity: 1;  } }
</style>

